<!DOCTYPE html>
<!-- saved from url=(0060)https://www.17sucai.com/preview/11/2017-02-19/css3/demo.html -->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>css3旋转加载效果</title>

    <style>
      body {
        background: #263238;
        background-size: cover;
        margin: 0;
        padding-top: 5em;
        padding-bottom: 5em;
      }

      .container {
        display: flex;
        flex-wrap: wrap;
        height: ;
        justify-content: space-around;
        margin: 0 auto;
        max-width: 650px;
        min-width: 200px;
      }

      .canvas {
        align-items: center;
        background: #eeeeee;
        border-radius: 50%;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        display: flex;
        height: 10em;
        justify-content: center;
        margin: 1em 1em 2em 1em;
        width: 10em;
      }

      /* Spinner 1 starts here */
      .spinner1 {
        align-items: center;
        border: 0.3em solid transparent;
        border-top: 0.3em solid #4db6ac;
        border-right: 0.3em solid #4db6ac;
        border-radius: 100%;
        display: flex;
        justify-content: center;
      }

      .spinnerMax {
        animation: spinnerOne 3s linear infinite;
        height: 3em;
        width: 3em;
      }

      .spinnerMid {
        animation: spinnerOne 5s linear infinite;
        height: 2.4em;
        width: 2.4em;
      }

      .spinnerMin {
        animation: spinnerOne 5s linear infinite;
        height: 1.8em;
        width: 1.8em;
      }

      @keyframes spinnerOne {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /* Spinner 1 ends here */

      /* Spinner 2 starts here */
      .canvas2 {
        position: relative;
      }

      .spinner2 {
        animation: spinnerTwo 1s linear infinite;
        background: #4db6ac;
        border-radius: 100px;
        height: 3em;
        transform-origin: top;
        position: absolute;
        top: 50%;
        width: 0.22em;
      }

      .hourHand {
        animation: spinnerTwo 7s linear infinite;
        background: #4db6ac;
        border-radius: 100px;
        height: 2em;
        transform-origin: top;
        position: absolute;
        top: 50%;
        width: 0.2em;
      }

      .dot {
        background: #4db6ac;
        border-radius: 100%;
        height: 0.5em;
        width: 0.5em;
      }

      @keyframes spinnerTwo {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /* Spinner 2 ends here */

      /* Spinner 3 starts here */
      .spinner3 {
        animation: spinnerThree 1s linear infinite;
        background: #4db6ac;
        border-radius: 100%;
        width: 3em;
        height: 3em;
      }

      @keyframes spinnerThree {
        0%,
        35% {
          background: #4db6ac;
          transform: scale(1);
        }
        20%,
        50% {
          background: #80cbc4;
          transform: scale(1.3);
        }
      }
      /* Spinner 3 ends here */

      /* Spinner 4 starts here */
      .spinner4 {
        animation: spinnerFour 1s linear infinite;
        border: solid 7px transparent;
        border-top: solid 7px #4db6ac;
        border-radius: 100%;
        width: 3em;
        height: 3em;
      }

      @keyframes spinnerFour {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /* Spinner 4 ends here */

      /* Spinner 5 starts here */
      .spinner5 {
        animation: spinnerFive 1s linear infinite;
        border: solid 1.5em #4db6ac;
        border-right: solid 1.5em transparent;
        border-left: solid 1.5em transparent;
        border-radius: 100%;
        width: 0;
        height: 0;
      }

      @keyframes spinnerFive {
        0% {
          transform: rotate(0deg);
        }
        50% {
          transform: rotate(60deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /* Spinner 5 ends here */

      /* Spinner 6 starts here */
      .spinner6 {
        background: #4db6ac;
        border-radius: 50%;
        height: 1em;
        margin: 0.1em;
        width: 1em;
      }

      .p1 {
        animation: fall 1s linear 0.3s infinite;
      }

      .p2 {
        animation: fall 1s linear 0.2s infinite;
      }

      .p3 {
        animation: fall 1s linear 0.1s infinite;
      }

      .p4 {
        animation: fall 1s linear infinite;
      }

      @keyframes fall {
        0% {
          transform: translateY(-15px);
        }
        25%,
        75% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-15px);
        }
      }
      /* Spinner 6 ends here */

      @media (max-width: 600px) {
        .container {
          align-items: center;
          flex-direction: column;
        }
        .canvas {
          margin: 1em;
        }
      }
    </style>
  </head>
  <body style="">
    <div class="container">
      <div class="canvas canvas1">
        <div class="spinner1 spinnerMax">
          <div class="spinner1 spinnerMid">
            <div class="spinner1 spinnerMin"></div>
          </div>
        </div>
      </div>

      <div class="canvas canvas2">
        <div class="spinner2"></div>
        <div class="hourHand"></div>
        <div class="dot"></div>
      </div>

      <div class="canvas canvas3">
        <div class="spinner3"></div>
      </div>

      <div class="canvas canvas4">
        <div class="spinner4"></div>
      </div>

      <div class="canvas canvas5">
        <div class="spinner5"></div>
      </div>

      <div class="canvas canvas6">
        <div class="spinner6 p1"></div>
        <div class="spinner6 p2"></div>
        <div class="spinner6 p3"></div>
        <div class="spinner6 p4"></div>
      </div>
    </div>
  </body>
</html>
